<script setup></script>

<template>
	<router-view/>
	<!--<router-view v-slot="{Component}">
		<transition> 
			<keep-alive>
				<component :is="Component"/>
			</keep-alive>
		</transition>
	</router-view>-->
	<nav>
		<router-link class="tab-bar-item" to="/">
			<div class="icon"><i class="iconfont icon-home"></i></div>
			<div>首页</div>
		</router-link>
		<router-link class="tab-bar-item" to="/category">
			<div class="icon"><i class="iconfont icon-category"></i></div>
			<div>分类</div>
		</router-link>
		<router-link class="tab-bar-item" to="/shopcart">
			<div class="icon">
				<van-badge :content="$store.state.cartCount" max="9">
					<i class="iconfont icon-shopcart"></i>
				</van-badge>
			</div>
			<div>购物车</div>
		</router-link>
		<router-link class="tab-bar-item" to="/profile">
			<div class="icon"><i class="iconfont icon-mine"></i></div>
			<div>我的</div>
		</router-link>
	</nav>
</template>

<style lang="scss" scoped>
@import "@/assets/css/base.css";
@import "@/assets/css/font/iconfont.css";


#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}

nav {
	background: #F6F6F6;
	z-index: 999;
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0 -10px rgba(100, 100, 100, .1);

	a {
		color: var(--color-text);

		&.router-link-exact-active {
			color: var(--color-high-text);
		}
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		height: 50px;
		font-size: var(--font-size);

		.icon {
			width: 24px;
			height: 24px;
			margin-top: 3px;
			vertical-align: middle;
			display: inline-block;
		}
	}
}
</style>